import React from "react"
import HomeHeader from "../../components/shop_components/HomeHeader"
import Banner from "../../components/shop_components/Banner"
import HomeHot from "./HomeHot"
import FooterNav from "../../components/shop_components/FooterNav"

import bannder1 from "../../static/images/shop_img/banner1.png"
import bannder2 from "../../static/images/shop_img/banner2.png"
import bannder3 from "../../static/images/shop_img/banner3.png"

import { connect } from "react-redux";
import * as cityActions from "../../redux/actions/city"
import { bindActionCreators } from "redux"
import { withRouter } from "react-router-dom"

class Home extends React.Component{

  constructor(){
    super();
    this.state = {
      banners:[bannder1,bannder2,bannder3]
    }
  }

  render(){
    return(
      <div className="hasFootNav">
        <HomeHeader />
        <Banner banners={ this.state.banners }/>
        <div className="column_type">
          <a href="#"><div>新品上市</div></a>
          <a href="#"><div>二手商城</div></a>
        </div>
        <HomeHot city={this.props.getCityinfo.cityName} />  
        <FooterNav />
      </div>
    )
  }
}


// 读
function mapStateToprops(state){
  return {
    getCityinfo:state.cityinfo
  }
}

// 写
function mapDispatchToprops(dispatch){
  return {
    setCityinfo: bindActionCreators(cityActions,dispatch)
  }
}

export default withRouter(connect(
  mapStateToprops,
  mapDispatchToprops
)(Home))